

<template>
<div>
  <van-nav-bar
      title="行程结束"
      left-arrow
      @click-left="onClickLeft"
  />
  <div>
    <span>订单待支付</span>
    <h2><span style="font-size: 28px"><span style="font-size: 20px;color: red">￥</span>{{money}}</span><br></h2>
  </div>

  <div>
    <span>匿名评价乘客</span>
    <div>行程信息</div>
    <van-form v-model="form" @submit="onSubmit">
      <van-rate v-model="form.averageScore" @change="starOnChange()" />
      <div class="checkbox-container">
        <van-checkbox-group v-model="result" ref="checkboxGroup">
          <div class="checkbox-row">
            <van-checkbox :name="1">文明礼貌</van-checkbox>
            <van-checkbox :name="2">爱护车辆  </van-checkbox>
            <van-checkbox :name="3">沟通顺畅  </van-checkbox>
          </div>
          <div class="checkbox-row" style="margin-top: 20px">
            <van-checkbox :name="4">  守时  </van-checkbox>
            <van-checkbox :name="5">  爱干净  </van-checkbox>
            <van-checkbox :name="6">  爱聊天  </van-checkbox>
          </div>
        </van-checkbox-group>
      </div>
      <div style="margin: 16px;">
<!--        <van-button round block type="info" native-type="submit">提交</van-button>-->
      </div>
    </van-form>
  </div>

  <van-tabbar v-model="active">
    <van-tabbar-item class="bgso" @click="goLisen()">刷新</van-tabbar-item>
    <van-tabbar-item style="background-color: #4ea9cb">听单中...</van-tabbar-item>
    <van-tabbar-item style="background-color: #919191" @click="listenReset()">休息</van-tabbar-item>
  </van-tabbar>

</div>
</template>
<script>
import {getOrderCosts, updateTodayOrderStatus} from "@/components/api/homepage/homePage";

export default {
  data() {
    return {
      active:"",

      result: [],
      value: 3,
      form: {},
      money: null,
      driverLong:null,
      resultStr: "",
    };
  },
  created() {
    if (this.$route.query.orderId) {
      this.form.orderId = this.$route.query.orderId;
      this.driverLong=this.$route.query.driverLong;
    }

    // 在页面创建后延迟两秒调用getMoney方法
      this.getMoney();

    this.getOrderItem();
  },
  methods: {
    listenReset(){
      //   去修改当前司机的该行程的订单状态?行程id从哪来?
      this.todayId = localStorage.getItem('todayId');
      updateTodayOrderStatus(this.todayId).then(res=>{
        console.log(res)
        if(res.code==="200"){
          localStorage.removeItem('todayId');
        }
      })
      this.$router.push({
        path: '/homeIndex'
      })
    },
    goLisen(){
      this.$router.push({
        path: '/GetOrder',
        query: {
          driverId: 1
        }
      })
    },
    getOrderItem() {
      // 查询订单的资费信息，如评价多少分，评价内容
      // getOrderItem(this.form.id).then(res => {
      //   console.log(res);
      // });
    },
    starOnChange() {
      // 在这里添加starOnChange方法的逻辑
    },
    getMoney() {
      getOrderCosts(this.form.orderId).then(res => {
        this.money = res.orderCost.orderMoney;
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      for (let i = 0; i < this.result.length; i++) {
        this.resultStr += this.result[i];
        if (i < this.result.length - 1) {
          this.resultStr += ",";
        }
      }
      console.log(this.resultStr);
      this.form.driverEvaluationoptions = this.resultStr;
    },
  },
};
</script>

<style scoped>
.bgso{
  background-color: orange;
  color: white;
}
.checkbox-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: 80px;
  padding-top: 50px;
}

.checkbox-row {
  width: 33%;
  align-items: center; /* 垂直居中对齐 */
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.checkbox-row van-checkbox {
  flex-basis: calc(33.33% - 10px); /* 每行显示三个，减去间距 */
  margin-bottom: 20px; /* 设置底部间距 */
  box-sizing: border-box;
}
checkbox{
  margin-left: 10px;
}
</style>
